<template>
     <a-range-picker v-model:value="value" @change="dateChange" valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 100%;" />
    
</template>
<script setup lang="ts">
import {ref, watch, onMounted} from 'vue'

const startDate = defineModel<string>('startDate')
const endDate = defineModel<string>('endDate')
const value = ref<string[]>([])
watch(startDate, (newVal) => {
     if(!newVal){
          value.value = []
          return
     }
     value.value = [startDate.value!, endDate.value!]
})

const dateChange = (a:any, dateList:string[]) => {
     
     if (dateList[0]) {
          startDate.value = dateList[0] + ' 00:00:00'
          endDate.value = dateList[1] + ' 23:59:59'
     } else {
          startDate.value = undefined
          endDate.value = undefined
     }

}
onMounted(() => {
     if(!startDate.value){
          value.value = []
          return
     }
     value.value = [startDate.value, endDate.value!]
})
</script>